<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/images/ada.jpg" class="logo-bg" />
    </div>
    <div class="input">
      <div class="mobile input-box">
        <img src="../assets/images/ada.jpg" class="mobile-pic" />
        <input type="text" placeholder="请输入手机号" v-model="mobile" />
      </div>
      <div class="input-code input-box">
        <img src="../assets/images/ada.jpg" class="code-pic" />
        <input type="text" placeholder="请填写验证码" v-model="code" />
        <span>|</span>
        <span class="btn-code" @click="getCode" v-if="show">获取验证码</span>
        <span class="btn-code" v-if="!show">{{count}} s后重新获取</span>
      </div>
    </div>
    <div class="btn-submit">
      <span @click="submit">登陆</span>
    </div>
  </div>
</template>

<script>
import { setCookie, getCookie } from "../unit/cookie";
export default {
  name: "login",
  data() {
    return {
      mobile: "",
      code: "",
      show: true,
      count: "",
      timer: null
    };
  },
  created() {
    let that = this;
    // 打开页面判断有没有登陆
    console.log()
    if (getCookie("jwtToken") == null || getCookie("jwtToken") == "undefined") {
      return;
    } else if (getCookie("jwtToken")) {
      this.$router.push("/home");
    }
  },
  methods: {
    // 倒计时
    getCodeTime() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode() {
      let that = this;
      if (that.mobile == "") {
        this.$toast("请输入手机号");
        return false;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.mobile)) {
        this.$toast("手机号码有误，请重填");
        return false;
      }
      let param = {
        phoneNumber: that.mobile,
        uid: 3323
      };
      let url = "uc/api/v1/gather/verification";
      that.$ajax.post(url, that.qs.stringify(param)).then(res => {
        if (res.data.status == "success") {
          this.$toast.success("发送成功，验证码一分钟内有效");
          that.getCodeTime();
        }
      });
    },
    // 登陆
    submit() {
      // this.$store.commit("SetSup",111);
      // console.log(this.$store.state.common.supplierUsers)
      // return false
      let that = this;
      if (that.mobile == "") {
        this.$toast("请输入手机号");
        return false;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.mobile)) {
        this.$toast("手机号码有误，请重填");
        return false;
      }
      if (that.code == "") {
        this.$toast("请填写验证码");
        return false;
      }
      let param = {
        userTel: Number(that.mobile),
        code: Number(that.code),
        uid: 3323,
        isUpdate: false
        // supplierId: false
      };
      let url = "ac/api/v1/reserve/createPlatformUser";
      that.$ajax.post(url, that.qs.stringify(param)).then(
        res => {
          if (res.status == 200) {
            if (res.data.supplierUsers.length > 1) {
              // 保存企业列表
              that.$store.commit("SetSup", res.data.supplierUsers);
              // 保存用户手机号
              that.$store.commit("SetMobile", that.mobile);
              // 保存验证码
              that.$store.commit("SetCode", that.code);
              that.$router.push("/business");
            } else {
              alert(111);
              // 保存token
              setCookie("expireTime", res.data.expireTime, 7);
              setCookie("jwtToken", res.data.jwtToken, 7);
              setCookie("userId", res.data.userId, 7);
              that.$router.push("/home");
            }
          }
        },
        res => {
          console.log(555, res);
        }
      );
    }
  }
};
</script>>

<style scoped>
.logo {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  padding-top: 600px;
  box-sizing: border-box;
}
.logo .logo-bg {
  width: 600px;
  height: 600px;
}
.input {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.input-box {
  width: 70%;
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: 70px;
}
.input .mobile .mobile-pic {
  width: 200px;
  height: 200px;
}
.input .mobile input {
  width: 70%;
  text-align: right;
}
.input .input-code .code-pic {
  width: 200px;
  height: 200px;
}
.input .input-code input {
  width: 30%;
}
.input .input-code .btn-code {
  width: 35%;
  font-size: 32px;
  color: blue;
  text-align: right;
}
.btn-submit {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.btn-submit span {
  display: inline-block;
  padding: 30px 0;
  box-sizing: border-box;
  color: #fff;
  font-size: 32px;
  text-align: center;
  width: 70%;
  background-color: blue;
  border-radius: 30px;
}
</style>